/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
    Button,
    ToastAndroid,
    Image,
    ScrollView,
    TouchableOpacity,
    PixelRatio,
    TouchableHighlight,
    DrawerLayoutAndroid,


} from 'react-native';
import {Navigator} from 'react-native-deprecated-custom-components';
import Header from './Header';//将头部组建引进来
import BaseComponent from './BaseComponent';
import Main from './Main';
import ImageDemo from './ImageDemo';
import MyPicker from './MyPicker';
import MyViewPager from './MyViewPager';

class MyApp extends BaseComponent {

    render() {
        let defaultName='AwesomeProject';
        let defaultComponent=AwesomeProject;
        return (
            <Navigator
                initialRoute={{ name: defaultName, component: defaultComponent }}
                configureScene={
                        (route) => {
                            return Navigator.SceneConfigs.VerticalUpSwipeJump;
                        }
                    }
                renderScene={(route, navigator) => {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator} />
                    }
                } />

        );
    }
}


 class AwesomeProject extends BaseComponent {


     tiaozhuan(){
         const { navigator } = this.props;
         if(navigator){

             navigator.push({
                 name:'Main',
                 component:Main,
             })
         }
     }
     iamgedemo(){
         const { navigator } = this.props;
         if(navigator){

             navigator.push({
                 name:'ImageDemo',
                 component:ImageDemo,
             })
         }
     }

     picker(){
         const {navigator} =this.props;
         if(navigator){
             navigator.push({
                 name:'MyPicker',
                 component:MyPicker,
             })
         }
     }
     myviewpager(){
         const {navigator} =this.props;
         if(navigator){
             navigator.push({
                 name:'MyViewPager',
                 component:MyViewPager,
             })
         }
     }

  render() {
      var new2 = [];
      for(var i=0;i < 100;i++){
          new2.push("南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻");
      }

      var navigationView = (
          <View style={{flex: 1, backgroundColor: '#ff0000'}}>
              <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>我是抽屉!</Text>
          </View>
      );

    return (
        <DrawerLayoutAndroid drawerWidth={200} drawerPosition={DrawerLayoutAndroid.positions.left}
                             renderNavigationView={()=>navigationView}>


        <View style={styles.norow}>
            <Header/>
              <View style={styles.corrtor}>
                <View style={[styles.myitem,styles.mytext,styles.mytextstyle]}>
                  <Text style={styles.font} onPress={this.iamgedemo.bind(this)}>image组件</Text>
                </View>
                <View style={[styles.myitem,styles.lineleftright]}>
                  <View style={[styles.norow,styles.mytext,styles.linecenter,styles.mytextstyle]}>
                    <Text style={styles.font} onPress={this.picker.bind(this)}>picker组件</Text>
                  </View>
                  <View style={[styles.norow,styles.mytext,styles.mytextstyle]}>
                    <Text style={styles.font} onPress={this.myviewpager.bind(this)}>viewpager组件</Text>
                  </View>
                </View>
                <View style={styles.myitem}>
                  <View style={[styles.norow,styles.mytext,styles.linecenter,styles.mytextstyle]}>
                    <Text style={styles.font}>飞机票</Text>
                  </View>
                  <View style={[styles.norow,styles.mytext,styles.mytextstyle]}>
                    <Text style={styles.font}>龙船票</Text>
                  </View>
                </View>
              </View>
            <ScrollView>
                <TouchableHighlight underlayColor='#E1F6FF' onPress={this.tiaozhuan.bind(this)}><TextList title="一线城市楼市退烧 有房源一夜跌价160万"></TextList></TouchableHighlight>
                <TouchableHighlight underlayColor='#E1F6FF' onPress={this.tiaozhuan.bind(this)}><TextList title="一线城市楼市退烧 有房源一夜跌价160万"></TextList></TouchableHighlight>
                <TouchableHighlight underlayColor='#E1F6FF' onPress={this.tiaozhuan.bind(this)}><TextList title="一线城市楼市退烧 有房源一夜跌价160万"></TextList></TouchableHighlight>
                <TouchableHighlight underlayColor='#E1F6FF' onPress={this.tiaozhuan.bind(this)}><TextList title="一线城市楼市退烧 有房源一夜跌价160万"></TextList></TouchableHighlight>
                <TouchableHighlight underlayColor='#E1F6FF' onPress={this.tiaozhuan.bind(this)}><TextList title="一线城市楼市退烧 有房源一夜跌价160万"></TextList></TouchableHighlight>
                <ImportantNews
                    news={new2}>
                </ImportantNews>
            </ScrollView>

        </View>
        </DrawerLayoutAndroid>


    );
  }
}



/**
 * 自定义组建textlist，
 */
class TextList extends Component{

    setNativeProps(nativeProps) {
        this._root.setNativeProps(nativeProps);
    }

    //渲染内部的Dom

    render(){
        return(
            <View style={styles.listitem} ref={component => this._root = component} >
                <Text style={styles.listitemtext} >{this.props.title}</Text>
            </View>

        );

}
}

class ImportantNews extends Component{

    show(title){
        alert(title);
    }
    render(){
        var news=[];
        for(var i in this.props.news){
            var text=(

                <Text
                    onPress={this.show.bind(this,this.props.news[i])}
                    numberOfLines={2}
                    style={styles.news_item}
                    key={i}

                >{this.props.news[i]}</Text>
            );
            news.push(text);
        }
        return (
            <View style={styles.flex}>
                <Text style={styles.news_title}>今日要闻</Text>
                {news}

            </View>

        );
    }
}

const styles = StyleSheet.create({
    flex:{
        flex:1,
        marginBottom:50,
    },
    listitem:{
        height:40,
        borderBottomWidth:1/PixelRatio.get(),
        borderColor:'#ddd',
        marginTop:4,
        marginBottom:4,
        justifyContent:'center',
        alignItems:'center',
    },
    listitemtext:{
        fontSize:16,
        color:'#000000',
        textAlign:'center'
    },
    corrtor:{
        borderWidth:2,
        borderColor:'#FF2775',
        backgroundColor:'#FF2775',
        flexDirection:'row',
        height:100,
        borderRadius:6,
        marginTop:4,
        marginLeft:10,
        marginRight:10,
        padding:6,

    },
    myitem:{
        flex:1,
        height:84,
    },
    //字体居中
    mytextstyle:{
        justifyContent:'center',
        alignItems:'center',
    },
    norow:{
        flex:1,
    },
    font:{
        fontSize:16,
        color:'#fff',
        fontWeight:'bold'
    },
    lineleftright:{
        borderLeftWidth:1/PixelRatio.get(),
        borderRightWidth:1/PixelRatio.get(),
        borderColor:'#fff',
    },
    linecenter:{
        borderBottomWidth:1/PixelRatio.get(),
        borderColor:'#fff'
    },
    news_title:{
        fontSize:20,
        fontWeight:'bold',
        color:'#CD1D1C',
        marginLeft:10,
        marginTop:15,

    },
    news_item:{
        marginLeft:10,
        marginRight:10,
        fontSize:15,
        lineHeight:40,
    },

});

AppRegistry.registerComponent('AwesomeProject', () => MyApp);
